<template>
    <div>
        <!--        按钮-->
        <el-row>
            <el-col :span="4" style="font-size: larger">订单中心
            </el-col>
        </el-row>
        <el-row>
            <el-row>
                <el-col :span="4">
                    <el-select placeholder="" v-model="param.kind">
                        <el-option label="菜品" :value="1"></el-option>
                        <el-option label="订单" :value="0"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="12">
                    <el-input
                        placeholder="请输入内容"
                        v-model="param.key"
                        clearable>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="info" icon="el-icon-search" @click="search()">搜索</el-button>
                </el-col>
            </el-row>
        </el-row>
        <div v-for="(v, index) in order_list" :key="v.id"  :offset="1"  style="text-align: left; font-size: larger; color: deepskyblue">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <el-row  >
                        <el-col  :span="4"   >
                            订单号:{{v.id}}
                        </el-col>
                        <el-col  :span="20"   style="text-align: right">
                            总金额:￥{{v.totalAmout}},商品总类：{{v.totalNum}}
                        </el-col>
                    </el-row>
                </div>
                <div v-for="goods in v.goods" :key="goods.goods_id" class="text item">
                        <el-descriptions class="margin-top"  :column="4" size="medium" border>
                            <el-descriptions-item>
                                <template slot="label">
                                    店铺名
                                </template>
                                {{goods.shop_name}}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    商品名
                                </template>
                                {{goods.goods_name}}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    总数量
                                </template>
                                {{goods.count}}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    总价格
                                </template>
                                {{goods.price}}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    图片
                                </template>
                                <el-image :src="goods.goods_img" style="width: 120px; height: 90px"  fit="cover"></el-image>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    订单状态
                                </template>
                                <el-tag type="success" style="font-size: larger">{{state_word(goods.state)}}</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item  >
                                <div class="block"  v-show="(goods.state == 2)">
                                    <el-rate
                                        v-model="goods.score"

                                        :disabled="(goods.score_state == 1)"
                                        @change="(value)=>rateChange(value, goods, v.id)"
                                    >
                                    </el-rate>
                                </div>
                            </el-descriptions-item>
                        </el-descriptions>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    name: "Order",
    data() {
        return {
            param:{
                kind:1,  ///搜索订单或者菜品
                key:'',
                userid:window.sessionStorage.getItem('userid'),
            },
            order_list:[],
            price:0,
            state:['未接单','已接单','已完成'],
            cancel_order : false,
            order_score_value:null,
            order_score_form:{
                id:'',
                score:'',
                orderid:''
            }
        }
    },
    methods: {
        search(){
            this.getorder_list();
        },
        getorder_list(){  ////查询功能，当前有哪些
            this.$ajax.get(this.$API.http+"/api/Usershopcart/showorder", {params:this.param}).then(res=> {
                    this.msg = res.data.msg;
                    if(res.data.code == 1){
                        this.order_list = res.data.order_list;
                        console.log(this.order_list);
                    }
                    else{
                        this.$msg.error(this.msg);
                    }
                },
                error => {
                    //请求后更新List的数据
                    window.alert(error);
                }
            )
        },
        state_word(state){
            if(state == 0){
                return '未接单'
            }else if(state == 1){
                return '已接单'
            }else if(state ==2){
                return '已完成'
            }else if(state==3){
                return '已取消'
            }
        },
        rateChange(value, goods, id ) {
            console.log(value);
            console.log(goods.goods_id);
            console.log(id);
            this.order_score_form.id = goods.goods_id;
            this.order_score_form.score = value;
            this.order_score_form.orderid = id;

            this.$ajax.get(this.$API.http+"/api/User/score", {params:this.order_score_form}).then(res=> {
                    this.msg = res.data.msg;
                    if(res.data.code == 1){
                        this.$msg.success(this.msg);
                        this.getorder_list();
                    }
                    else{
                        this.$msg.error(this.msg);
                    }
                },
                error => {
                    //请求后更新List的数据
                    window.alert(error);
                }
            )
        }
    }
    ,
    created() {
        this.getorder_list();
    }
}
</script>

<style scoped>

.mid{
    margin-top: 25%;
    height: 50%;
}
.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}


</style>


